<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>文件上传</title>
    <script type="text/javascript" src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="image-preview"></div>
<input
        type="file"
        id="upload-input"
        accept="image/*"
        onchange="uploadImage()"
/>
<div id="outerDiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerDiv" style="position:absolute;">
        <img id="bigImg" style="border:5px solid #fff;" src=""/>
    </div>
</div>
</body>
<script>
    function uploadImage() {
        const input = document.getElementById("upload-input");
        const file = input.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (event) {
                const code = event.target.result;
                uploadFile(file,code);
            };
            reader.onerror = function (error) {
                console.error("Error reading the file:", error);
            };
            reader.readAsDataURL(file);
        }
    }

    function uploadFile(file,code){
        const formData = new FormData();
        formData.append("file", file);
        $.ajax({
            url: 'upload',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            processData: false,// 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success:function(res){
                let imageContainer = document.getElementById('image-preview');
                let uploadedImage = document.getElementById('uploaded-image');
                if (uploadedImage) {
                    // 如果已经存在图片，则更新图片的属性
                    uploadedImage.setAttribute('src', code);
                    uploadedImage.setAttribute('alt', '');
                    uploadedImage.setAttribute('width', '79');
                    uploadedImage.setAttribute('height', '79');
                } else {
                    // 如果不存在图片，则创建新的图片元素并添加到容器中
                    uploadedImage = document.createElement('img');
                    uploadedImage.setAttribute('id', 'uploaded-image');
                    uploadedImage.setAttribute('src', code);
                    uploadedImage.setAttribute('alt', '');
                    uploadedImage.setAttribute('width', '79');
                    uploadedImage.setAttribute('height', '79');
                    imageContainer.appendChild(uploadedImage);
                }
                console.log(imageContainer);
            },
            error: function(res){
            }
        });
    }

    $("#image-preview").on('click', 'img',function(event) {
        let _this = $(this);//将当前的pimg元素作为_this传入函数
        imgShow("#outerDiv", "#innerDiv", "#bigImg", _this);
    });

    function imgShow(outerDiv, innerDiv, bigImg, _this){
        let src = _this.attr("src");//获取当前点击的pimg元素中的src属性
        $(bigImg).attr("src", src);//设置#bigimg元素的src属性

        $("<img/>").attr("src", src).on("load", function() {
            let windowW = $(window).width();//获取当前窗口宽度
            let windowH = $(window).height();//获取当前窗口高度
            let realWidth = this.width;//获取图片真实宽度
            let realHeight = this.height;//获取图片真实高度
            let imgWidth, imgHeight;
            let scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if(realHeight>windowH*scale) {//判断图片高度
                imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                    imgWidth = windowW*scale;//再对宽度进行缩放
                }
            } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
            } else {//如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigImg).css("width",imgWidth);//以最终的宽度对图片缩放

            var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
            $(innerDiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
            $(outerDiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
        }).on("error", function() {
            // Error loading image
        });

        $(outerDiv).click(function(){//再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }
</script>
</html>